<template>
  <div class="container">
    <div class="question-container">
      <el-card>
        <div class="btn_wrapper">
          <span class="tips">说明：目前支持学科和关键字条件筛选</span>
          <el-button
            type="success"
            class="btn"
            icon="el-icon-edit"
            @click="$router.push('new')"
          >
            新增题库
          </el-button>
        </div>
        <!-- 表单区域 -->
        <el-form
          ref="form"
          label-width="80px"
          size="small"
        >
          <el-row>
            <!-- 学科 -->
            <el-col :span="6">
              <el-form-item
                label="学科"
                class="el-col"
              >
                <el-select
                  v-model="form.subjectID"
                  placeholder="请选择"
                  @change="hSubjectChange"
                >
                  <el-option
                    v-for="item in subject"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 二级目录 -->
            <el-col :span="6">
              <el-form-item
                label="二级目录"
                class="el-col"
              >
                <el-select
                  v-model="form.catalogID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in catalog"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 标签 -->
            <el-col :span="6">
              <el-form-item
                label="标签"
                class="el-col"
              >
                <el-select
                  v-model="form.tags"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in tags"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 关键字 -->
            <el-col :span="6">
              <el-form-item
                label="关键字"
                class="el-col"
              >
                <el-input
                  placeholder="根据题干搜索"
                  v-model.trim="form.keyword"
                  style="width: 108%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- 试题类型 -->
            <el-col :span="6">
              <el-form-item
                label="试题类型"
                class="el-col"
              >
                <el-select
                  v-model="form.questionType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 难度 -->
            <el-col :span="6">
              <el-form-item
                label="难度"
                class="el-col"
              >
                <el-select
                  v-model="form.difficulty"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 方向 -->
            <el-col :span="6">
              <el-form-item
                label="方向"
                class="el-col"
              >
                <el-select
                  v-model="form.direction"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in direction"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 录入人 -->
            <el-col :span="6">
              <el-form-item
                label="录入人"
                class="el-col"
              >
                <el-select
                  v-model="form.creatorID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in creator"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- 题目备注 -->
            <el-col :span="6">
              <el-form-item
                label="题目备注"
                class="el-col"
              >
                <el-input
                  v-model.trim="form.remarks"
                  style="width: 108%"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 企业简称 -->
            <el-col :span="6">
              <el-form-item
                label="企业简称"
                class="el-col"
              >
                <el-input
                  v-model.trim="form.shortName"
                  style="width: 108%"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 城市 -->
            <el-col :span="6">
              <el-form-item
                label="城市"
                class="el-col"
              >
                <el-select
                  class="filter-item"
                  style="width: 42%; margin-right: 2%"
                  v-model="form.province"
                  @change="handleCity"
                  clearable
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select
                  class="filter-item"
                  style="width: 42%"
                  v-model="form.city"
                  @change="handleCity"
                  clearable
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 按钮 -->
            <el-col :span="6">
              <el-form-item class="el-col">
                <el-button
                  style="margin-left: 80px"
                  @click="hclear"
                >清除</el-button>
                <el-button
                  type="primary"
                  :loading="isLoading"
                  @click="doGetList"
                >搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-alert
          style="margin: 10px 0"
          v-if="cResultTip"
          :title="cResultTip"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 表格区域 -->
        <!-- 数据列表 -->
        <el-table
          :data="tableData"
          v-loading="isLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            label="试题编号"
            prop="number"
          > </el-table-column>
          <el-table-column
            label="学科"
            prop="subject"
          > </el-table-column>
          <el-table-column
            label="目录"
            prop="catalog"
          > </el-table-column>
          <el-table-column
            label="题型"
            width="80px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-if="scope.row.questionType === '2'">多选</span>
              <span v-if="scope.row.questionType === '3'">简答</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题干"
            width="200px"
          >
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            prop="addDate"
            width="180px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-if="scope.row.difficulty === '2'">一般</span>
              <span v-if="scope.row.difficulty === '3'">困难</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="录入人"
            prop="creator"
          >
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            label="操作"
            width="280"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                plain
                @click="hDilogChange(scope.row)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                circle
                plain
                @click="hEdit(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="hDelete(scope.row.id)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                circle
                plain
                @click="hSelected(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->

        <div
          class="pages"
          style="overflow:hidden;margin-top:20px"
        >

          <el-pagination
            style="float: right"
            background
            :disabled="isLoading"
            @size-change="hSizeChange"
            @current-change="hCurrentChange"
            :current-page="Number(form.page)"
            :total="Number(total)"
            :page-size="Number(form.pagesize)"
            :page-sizes="[5, 10, 20, 50]"
            layout="sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>

        <!-- 弹出层 -->
        <el-dialog
          :visible.sync="dialogVisible"
          title="题目预览"
          width="720px"
        >
          <Mypreview
            v-model="questionID"
            @Dialog="cloceDialog(bool)"
            v-if="dialogVisible"
          ></Mypreview>
        </el-dialog>
        <!-- end -->
      </el-card>
    </div>
  </div>
</template>

<script>
import { parseTime } from '../../filters/index'
import {
  list as getList,
  remove as deleteQuestion,
  choiceAdd
  // detail
} from '../../api/hmmm/questions'
import { simple as getSubject } from '../../api/hmmm/subjects'
import { simple as getCatalog } from '../../api/hmmm/directorys'
import { simple as getTags } from '../../api/hmmm/tags'
import { simple as getUserList } from '../../api/base/users'
import { difficulty, questionType, direction } from '../../api/hmmm/constants'
import {
  provinces as getProvinces,
  citys as getCitys
} from '@/api/hmmm/citys.js'
import Mypreview from '../components/questions-base'
export default {
  components: {
    Mypreview
  },
  data () {
    return {
      isLoading: false,
      form: {
        page: 1, // 页码
        pagesize: 5, // 每页容量
        subjectID: '', // 学科
        catalogID: '', // 学科二级目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 省份
        city: '' // 城市
      },
      subject: [], // 学科列表
      catalog: [], // 二级目录列表
      tags: [], // 标签列表
      tableData: [], // 表格数据
      total: 10, // 记录总数
      difficulty, // 难度
      questionType, // 试题类型
      direction, // 方向
      creator: [], // 录入人列表
      provAndCity: {
        // 城市
        province: '',
        city: ''
      },
      provinceList: [],
      cityList: [],
      dialogVisible: false,
      questionID: ''
    }
  },
  methods: {
    // 构建请求参数
    buildParams () {
      const paramsObj = {}
      const {
        page,
        pagesize,
        subjectID,
        catalogID,
        tags,
        keyword,
        questionType,
        difficulty,
        direction,
        creatorID,
        remarks,
        shortName,
        province,
        city
      } = this.form
      // 如果某一个参数是null,则axios就不会发这个参数
      // 如果某一个参数是""，axios是会发出这个参数
      paramsObj.page = page || null
      paramsObj.pagesize = pagesize || null
      paramsObj.tags = tags || null
      paramsObj.subjectID = subjectID || null
      paramsObj.catalogID = catalogID || null
      paramsObj.keyword = keyword || null
      paramsObj.questionType = questionType || null
      paramsObj.difficulty = difficulty || null
      paramsObj.direction = direction || null
      paramsObj.creatorID = creatorID || null
      paramsObj.city = city || null
      paramsObj.remarks = remarks || null
      paramsObj.shortName = shortName || null
      paramsObj.province = province || null
      return paramsObj
    },
    // 获取题库列表
    async doGetList () {
      this.isLoading = true
      const params = this.buildParams()
      try {
        const res = await getList(params)
        console.log('题库列表', res)
        this.isLoading = false
        this.tableData = res.data.items
        this.total = res.data.counts
      } catch (err) {
        this.isLoading = false
        console.log(err)
      }
    },
    // 获取学科列表
    async doGetSubject () {
      try {
        const res = await getSubject()
        console.log('学科列表', res)
        this.subject = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 学科更改，获取二级目录,获取标签
    async hSubjectChange (val) {
      const params = {
        subjectID: val
      }
      try {
        const res = await getCatalog(params)
        console.log('二级目录列表', res)
        this.catalog = res.data
      } catch (error) {
        console.log(error)
      }
      try {
        const res = await getTags(params)
        console.log(res)
        this.tags = res.data
      } catch (err) {
        console.log(err)
      }
    },
    // 获取录入人列表。
    async doGetUserList () {
      try {
        const res = await getUserList()
        console.log('录入人列表', res)
        this.creator = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取省
    getCityDat () {
      this.provinceList = getProvinces()
      if (this.provAndCity.province) {
        this.cityList = getCitys(this.provAndCity.province)
      }
    },
    // 选省获取到市
    handleCity (e) {
      this.cityList = getCitys(e)
    },
    // 清空表单数据回调函数
    hclear () {
      this.form = {}
      this.doGetList()
    },
    // 预览试题
    async hDilogChange (row) {
      this.dialogVisible = true
      this.questionID = row.id
    },
    // 关闭弹窗
    cloceDialog (bool) {
      this.dialogVisible = bool
    },
    // 编辑题目
    hEdit (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },

    hDelete (id) {
      console.log(id)
      this.$confirm('您确定删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 2.发请求,删除数据
        this.doDelete(id)
      }).catch(() => {

      })
    },
    // 删除题目
    async doDelete (id) {
      try {
        const res = await deleteQuestion({ id })
        console.log(res)
        this.doGetList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
        this.$message.error('取消删除')
      }
    },

    // 加入精选
    hSelected (row) {
      this.$confirm('此操作将该题目加入精选，是否继续？')
        .then(async () => {
          // 构建请求参数
          const params = {
            id: row.id,
            choiceState: 1
          }
          const res = await choiceAdd(params)
          console.log(res)
          this.$message.success('加入精选成功')
          this.doGetList()
        })
        .catch(() => {
          console.log('取消了加入精选')
        })
    },
    // 更改每页显示的条数.0266
    hSizeChange (val) {
      this.form.pagesize = val
      if (this.form.page === 1) {
        this.doGetList()
      }
    },
    // 更改页码
    hCurrentChange (curPage) {
      this.form.page = curPage
      this.doGetList()
    }
  },
  created () {
    this.doGetSubject()
    this.doGetUserList()
    this.getCityDat()
    this.doGetList()
  },
  computed: {
    cResultTip () {
      return `总共 ${this.total} 条记录`
    }
  },
  filters: {
    parseTime
  }
}
</script>

<style scoped>
.question-container {
  padding: 0 10px;
  margin: 10px 0;
}
.btn_wrapper {
  height: 32px;
  margin-bottom: 15px;
}
.tips {
  font-size: 12px;
  color: pink;
}
.btn {
  float: right;
}
.el-col {
  float: left;
}
.alert {
  margin: 10px 0px;
}
</style>
